<template>
  <div class="tutorial">
    <h2>📍 静态路由学习</h2>
    <p>静态路由是最常见的路由配置方式，路径与组件一一对应。</p>

    <h3>概念要点</h3>
    <ul>
      <li>在 <code>router/index.js</code> 中通过 <code>routes</code> 数组配置。</li>
      <li>每个路由对象包含 <code>path</code>、<code>component</code> 或 <code>name</code>。</li>
      <li>通过 <code>&lt;RouterLink&gt;</code> 或 <code>router.push()</code> 导航。</li>
    </ul>

    <h3>示例配置</h3>
    <pre class="code"><code>import { createRouter, createWebHistory } from 'vue-router'
import AboutView from '@/views/AboutView.vue'
import ContactView from '@/views/ContactView.vue'

const routes = [
  { path: '/about', name: 'About', component: AboutView },
  { path: '/contact', name: 'Contact', component: ContactView }
]

export default createRouter({
  history: createWebHistory(),
  routes
})</code></pre>

    <h3>站内已有页面示例导航</h3>
    <div class="links">
      <RouterLink class="link" to="/courses">课程导航（已有）</RouterLink>
      <RouterLink class="link" to="/mixins">混入 Mixins（已有）</RouterLink>
    </div>
  </div>
</template>

<script setup>
// 该教程组件仅用于讲解与示例，不做实际路由改动
</script>

<style scoped>
.tutorial { padding: 20px; }
h2 { margin-bottom: 10px; }
h3 { margin-top: 20px; margin-bottom: 8px; }
.code { background: #1e1e1e; color: #d4d4d4; padding: 12px; border-radius: 8px; overflow:auto; }
.links { display: flex; gap: 12px; margin-top: 8px; }
.link { padding: 8px 12px; background:#f0f9ff; border:1px solid #bae6fd; border-radius: 6px; text-decoration:none; color:#0369a1; }
.link:hover { background:#e0f2fe; }
</style>